<template>
	<view class='content'>
		<uni-nav-bar
		left-icon="back" 
		status-bar=true
		fixed=true
		color="#FFF"
		left-text="返回" 
		right-text="" 
		title="美食"
		background-color="#409ED7"
		@clickLeft="toback"
		></uni-nav-bar>
		<view class='wrapper'>
			<view class='baseinfo'>
				<view class='title plheight'>{{title}}</view>
				<view class="feature">店内特色餐饮</view>
				<view class='features'>
					<view class='fitem'>{{keyword}}</view>
					<!-- <view class='fitem' v-for="(item,index) in features" :key="item.index">
						{{item}}、
					</view> -->
				</view>
				<view v-if='shopaddress' class='features'>
					地址：{{shopaddress}}
				</view>
				<view class='showimg plheight'>
					<!-- <image :src="showimg"></image> -->
					<view class="swiperBox">
						<uni-swiper-dot  field="content" >
							<swiper class="swiper-box" autoplay="true" circular="true" style="height: 10rem;">
								<swiper-item v-for="(item ,index) in list" :key="index">
									<image @click="showImage" :src="item" mode="scaleToFill" style="width: 100%;height: 100%;"></image>
								</swiper-item>
							</swiper>
						</uni-swiper-dot>
					</view>
				</view>
				<view class='labels'>
					<view class='litem' v-for="(item,index) in labels" :key="item.index">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class='info plheight'>
				<!-- <view class='opentime plheight'>
					<view>营业时间：</view>
					<view style="font-size: 14px;">周一至周五&nbsp;&nbsp;{{starttime}}--{{endtime}}</view>
				</view> -->
				<view>
					<view>店铺简介：</view>
					<view class="desc plheight" v-html="desc"></view>
				</view>
			</view>
		</view>
		<view style="display: flex;position: fixed;align-items: center;width: 100%;bottom: 0;">
			<view style="flex:1;" class='enterdz' @click="todzdp" v-if="mid">进入大众点评</view>
			<view style="flex:1; background-color: #007AFF;color:#FFF;padding: 10px 0;text-align: center;"  @click="openMap()">
				<uni-icons style='margin-right: 3px;' color='#FFF' type="navigate" size="16"></uni-icons>一键导航
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/pages/utils/api.js';
	import {uniSwiperDot} from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
	export default {
		data(){
			return{
				id:'',
				typeid:'',
				navtitle:"",
				title:"",
				keyword:'',
				list:[],
				labels:[],
				starttime:'09:00',
				endtime:'23:00',
				desc:'',
				mid:'', //大众点评商家id
				address:'',
				shopaddress:'',
				endlat:'',
				endlng:''
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.typeid = option.typeid;
			this.getDetails();
		},
		methods:{
			toback:function(){
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			}, 
			
			getDetails:function(){
				uni.showLoading({
				      title: '加载中...'
				  });
				var vm = this;
				api.getDetail({
					id:vm.id,
					type_id:vm.typeid
				}).then(data=>{
					console.log(data)
					if(data.code == 1){ 
						vm.navtitle = data.data.title;
						vm.title = data.data.title;
						vm.keyword = data.data.keyword;
						vm.labels = data.data.labels;
						vm.desc = data.data.intro;
						vm.list = data.data.scenery;
						vm.mid = data.data.mer_id;
						vm.endlat = data.data.latitude;
						vm.endlng = data.data.longitude; 
						vm.address = data.data.title;
						vm.shopaddress = data.data.address;
						uni.hideLoading();
					}else{
						uni.hideLoading();
						uni.showToast({
						    icon: 'none',
						    title: data.msg,
							position:'bottom'
						});
						setTimeout(function(){
							vm.toback();
						},1500);
					}
				})
			},
			//图片预览
			showImage:function(){
				var vm = this;
				uni.previewImage({
				  urls: vm.list
				});
			},
			todzdp:function(){
					let _this = this;  
					if (plus.os.name == 'Android') {   // 判断平台  
						var mid = _this.mid;
						plus.runtime.openURL('dianping://shopinfo?id='+mid, function(res) {
						    if(typeof res == 'string'){
								uni.showModal({
								    title: '提示',
								    content: '检测到未安装大众点评app',
									confirmText:'去安装',
									cancelText:'取消',
								    success: function (res) {
										let appleId=12345678
								        if (res.confirm) {
								           plus.runtime.openURL("market://details?id=com.dianping.v1",function(){})
								        } else if (res.cancel) {
								            console.log('用户点击取消');
								        }
								    }  
								});
							}
						}); 
					} else if (plus.os.name == 'iOS') { 
						var mid = _this.mid;
						plus.runtime.launchApplication({ action: 'dianping://shopinfo?id='+mid}, function(e) { //大众点评app内商家id 131588605
							console.log(e)
							if(e.code == -3){
								uni.showModal({
								    title: '提示',
								    content: '检测到未安装大众点评app',
									confirmText:'去安装',
									cancelText:'取消',
								    success: function (res) {
										let appleId=12345678
								        if (res.confirm) {
								            plus.runtime.launchApplication({
								            	action: `https://itunes.apple.com/cn/app/id351091731` // id351091731 app在商店的id
								            }, function(e) {
								            	uni.showToast({
								            	    icon: 'none',
								            	    title: e.message,
								            		position:'bottom'
								            	});
								            });
								        } else if (res.cancel) {
								            console.log('用户点击取消');
								        }
								    }
								});
							}
						});  
					}  
			},
			openMap(){
									var vm = this;
			           var url = "";  
			           if (plus.os.name == "Android") {  
			               var hasBaiduMap = plus.runtime.isApplicationExist({pname:'com.baidu.BaiduMap',action:'baidumap://'});  
			               var hasAmap = plus.runtime.isApplicationExist({pname:'com.autonavi.minimap',action:'androidamap://'});  
			               var urlBaiduMap = "baidumap://map/marker?location="+ vm.endlat +","+ vm.endlng +"&title="+ vm.address +"&src=Hello%20uni-app";  
			               var urlAmap = "androidamap://viewMap?sourceApplication=Hello%20uni-app&poiname="+ vm.address +"&lat="+ vm.endlat +"&lon="+ vm.endlng +"&dev=0"  
			               if (hasAmap && hasBaiduMap) {  
			                   plus.nativeUI.actionSheet({title:"选择地图应用",cancel:"取消",buttons:[{title:"百度地图"},{title:"高德地图"}]}, function(e){  
			                       switch (e.index){  
			                           case 1:  
			                               plus.runtime.openURL(urlBaiduMap);  
			                               break;  
			                           case 2:  
			                               plus.runtime.openURL(urlAmap);  
			                               break;  
			                       }  
			                   })  
			               }  
			               else if (hasAmap) {  
			                   plus.runtime.openURL(urlAmap);  
			               }  
			               else if (hasBaiduMap) {  
			                   plus.runtime.openURL(urlBaiduMap);  
			               }  
			               else{  
			                   url = encodeURI("geo:"+ vm.endlat +","+ vm.endlng +"?q="+ vm.address +"");  
			                   plus.runtime.openURL(url); //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差  
			               }  
			           } else{
			               // iOS上获取本机是否安装了百度高德地图，需要在manifest里配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加（如urlschemewhitelist:["iosamap","baidumap"]）  
			               plus.nativeUI.actionSheet({title:"选择地图应用",cancel:"取消",buttons:[{title:"Apple地图"},{title:"百度地图"},{title:"高德地图"}]}, function(e){  
			                   console.log("e.index: " + e.index);  
			                   switch (e.index){  
			                       case 1:  
			                           url = encodeURI("http://maps.apple.com/?q="+ vm.address +"&ll="+ vm.endlat +","+ vm.endlng +"&spn=0.008766,0.019441");  
			                           break;  
			                       case 2:  
			                           url = encodeURI("baidumap://map/marker?location="+ vm.endlat +","+ vm.endlng +"&title="+ vm.address +"&src=Hello%20uni-app");  
			                           break;  
			                       case 3:  
			                            url = encodeURI("iosamap://viewMap?sourceApplication=Hello%20uni-app&poiname="+ vm.address +"&lat="+ vm.endlat +"&lon="+ vm.endlng +"&dev=0");  
			                           break;  
			                       default:  
			                           break;  
			                   }  
			                   if (url!="") {
												console.log(url)
			                       plus.runtime.openURL( url, function( e ) {  
			                           plus.nativeUI.alert(e.message);  
			                       });  
							  
			                   }  
			               })  
			           }  
			       }
		}
	}
</script>

<style>
	.wrapper{
		padding: 0 .8rem 3rem .8rem;
	}
	.plheight{
		padding: 5px 0;
	}
	.showimg image{
		width: 100%;
		border-radius: 10px;
	}
	.title{
		font-size: 1.2rem;
		color:#414141;
	}
	.feature,.litem{
		color:#FF5B5A;
		font-size: 12px;
	}
	.features,.labels{
		display: flex;
		align-items: center;
		font-size: 12px;
	}
	.fitem{
		color:#444;
		padding: 0 5px 0 0;
	}
	.litem{
		border:1px #FF5B5A solid;
		padding: 2px 5px;
		border-radius: 4px;
		margin: 0 5px 0 0;
	}
	.info{
		color: #777;
		line-height: 1.5rem;
	}
	.desc{
		font-size: 15px;
		line-height: 1.2rem;
		text-indent: 2em;
	}
	.enterdz{
		/* position: fixed; */
		background: #FF981F;
		color: #FFF;
		text-align: center;
		width: 100%;
		padding: 10px 0;
		bottom: 0;
		z-index: 999;
	}
	.desc img{
		max-width: 90%;
	}
	.desc iframe{
		max-width: 90%;
		margin-left: -.5rem;
	}
</style>
